<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echartsJs/echarts.js"></script>
    <style>
        .box {
            width: 600px;
            height: 400px;
            display: block;
            border: 1px solid #999;
        }
    </style>
</head>

<body>

    <div class="box" id="box1"></div>

    <script>

        let arrs = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"];
        let list = [
            {
                "morning": 11, "afternoon": 18, "night": 8
            },
            {
                "morning": 12, "afternoon": 19, "night": 8
            },
            {
                "morning": 15, "afternoon": 20, "night": 18
            },
            {
                "morning": 14, "afternoon": 18, "night": 18
            },
            {
                "morning": 10, "afternoon": 16, "night": 12
            },
            {
                "morning": 11, "afternoon": 17, "night": 10
            },
            {
                "morning": 9, "afternoon": 18, "night": 9
            }
        ];

        for (var i = 0; i < arrs.length; i++) {
            list[i].name = arrs[i];
        }


        //第一个柱状图
        let chartDom = document.getElementById("box1");
        let myChart = echarts.init(chartDom);
        let option = {
            legend: {},
            tooltip: {},
            dataset: {
                // dimensions: [定义x轴类目轴种类的划分,需要指定柱状图展示的顺序、需要注意的是如果key值不是数值，可以省略该配置，如果key值是数值，不要省略该配置],
                dimensions: ['name', 'morning', 'afternoon', 'night'],
                source: list
            },
            xAxis: { type: 'category' },
            yAxis: {},
            series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
        };
        myChart.setOption(option);










    </script>
</body>

</html>